<template>
  <div class="find">
    <van-nav-bar title="发现" class="findTitle"> </van-nav-bar>
    <div class="tab">
      <van-cell is-link>
        <template #title>
          <span class="title">面试技巧</span>
        </template>
        <template #default>
          <span class="more">查看更多</span>
        </template>
      </van-cell>
    </div>
    <technic :item="item" v-for="(item, index) in item" :key="index"></technic>
    <div class="tab">
      <van-cell is-link>
        <template #title>
          <span class="title">市场数据</span>
        </template>
        <template #default>
          <span class="more">查看更多</span>
        </template>
      </van-cell>
    </div>
    <div class="marketData">
      <div class="tabbox">
        <span>{{ marketObj.city }}</span>
        <span>{{ marketObj.position }}</span>
      </div>
      <div class="detail" v-for="(item, index) in marketData" :key="index">
        <div class="salary">{{ item.year }}</div>
        <div class="progress">
          <van-progress
            :pivot-text="item.salary"
            color="#f2826a"
            :percentage="(item.salary / marketObj.topSalary) * 100"
            stroke-width="10"
          />
        </div>
        <div class="percentage">
          <i
            v-if="item.percent > 0"
            style="color:green;margin-right:10px"
            class="icon iconfont iconicon_shangsheng"
          ></i>
          <i
            v-else
            style="color:red;margin-right:10px"
            class="icon iconfont  iconicon_xiajiang"
          ></i>
          <span>{{ item.percent }}%</span>
        </div>
      </div>
      <div class="loadmore" @click="changeData" v-if="marketData.length === 4">
        展开更多 <van-icon name="arrow-down" />
      </div>
      <div class="loadmore" @click="changeData" v-else>
        收起显示 <van-icon name="arrow-up" />
      </div>
    </div>
    <div class="tab">
      <van-cell is-link>
        <template #title>
          <span class="title">面经分享</span>
        </template>
        <template #default>
          <span class="more" @click="$router.push('/sharemore')">查看更多</span>
        </template>
      </van-cell>
      <faceshare
        v-for="(item, index) in shareList"
        :key="index"
        :item="item"
      ></faceshare>
    </div>
  </div>
</template>
<script>
import { apiGetFacelist, apiGetMarketData, apiGetShareData } from '@/api/find'
import technic from './technic'
import faceshare from './faceshare'
export default {
  name: 'find',
  created () {
    this.data1 = this.data
    // 获取面试技巧列表
    this.getFacelist()
    // 市场数据
    this.getMarget()
    // 面经分享
    this.getShare()
  },
  components: {
    technic,
    faceshare
  },
  data () {
    return {
      isShow: false,
      marketData: [],
      item: [],
      marketObj: '',
      shareList: []
    }
  },
  methods: {
    changeData () {
      if (this.marketData.length === 7) {
        this.marketData = this.marketObj.yearSalary.slice(0, 4)
      } else if (this.marketData.length === 4) {
        this.marketData = this.marketObj.yearSalary
      }
    },
    // 面试技巧
    async getFacelist () {
      const res = await apiGetFacelist({ limit: 3 })
      this.item = res.data.list
      // console.log(this.item)
    },
    // 市场数据
    async getMarget () {
      const res = await apiGetMarketData()
      // console.log(res)

      res.data.yearSalary.reverse()
      this.marketObj = res.data
      this.marketData = this.marketObj.yearSalary.slice(0, 4)
      // console.log(res)
    },
    // 面经分享
    async getShare () {
      const res = await apiGetShareData({ limit: 3 })
      console.log(res)
      this.shareList = res.data.list
    }
  }
}
</script>
<style lang="less">
.find {
  margin-bottom: 43px;
  font-size: 12px;
  /deep/ .van-nav-bar__title {
    font-size: 20px;
  }
  .title {
    font-size: 20px;
  }
  .more {
    font-size: 16px;
  }
  .tab {
    padding: 15px 0;
  }
  .marketData {
    padding: 15px;
    .loadmore {
      text-align: center;
      font-size: 16px;
      color: #666;
      margin: 15px 0;
    }
    .tabbox span {
      display: inline-block;
      background-color: #eee;
      padding: 8px;
    }
    .tabbox span:nth-child(1) {
      margin-right: 10px;
    }
  }
  .detail {
    display: flex;
    margin-top: 20px;
    align-content: center;
    .progress {
      flex: 1;
      margin-left: 10px;
      margin-right: 15px;
    }
    .percentage {
      width: 50px;
      display: flex;
      i {
        flex: 1;
      }
      span {
        margin-right: 2px;
      }
    }
  }
}
</style>
